{% extends 'base.html' %}

{% block title %}{{ host.hostname }} - 主机详情{% endblock %}

{% block content %}
<div class="card">
    <div class="card-header">
        <h5 class="mb-0">主机详情</h5>
    </div>
    <div class="card-body">
        <div class="row">
            <div class="col-md-6">
                <h6>基本信息</h6>
                <table class="table">
                    <tr>
                        <th>主机名</th>
                        <td>{{ host.hostname }}</td>
                    </tr>
                    <tr>
                        <th>IP地址</th>
                        <td>{{ host.ip_address|default:"无" }}</td>
                    </tr>
                    <tr>
                        <th>监控类型</th>
                        <td>{{ host.get_monitor_type_display }}</td>
                    </tr>
                    <tr>
                        <th>状态</th>
                        <td>{{ host.get_status_display }}</td>
                    </tr>
                </table>
            </div>
            <div class="col-md-6">
                <h6>监控数据</h6>
                <div class="mb-3">
                    <label>CPU使用率</label>
                    <div class="progress">
                        <div class="progress-bar" role="progressbar" 
                             style="width: {{ host.cpu_usage }}%"
                             aria-valuenow="{{ host.cpu_usage }}" 
                             aria-valuemin="0" aria-valuemax="100">
                            {{ host.cpu_usage }}%
                        </div>
                    </div>
                </div>
                <div class="mb-3">
                    <label>内存使用率</label>
                    <div class="progress">
                        <div class="progress-bar" role="progressbar" 
                             style="width: {{ host.memory_usage }}%"
                             aria-valuenow="{{ host.memory_usage }}" 
                             aria-valuemin="0" aria-valuemax="100">
                            {{ host.memory_usage }}%
                        </div>
                    </div>
                </div>
                <div class="mb-3">
                    <label>磁盘使用率</label>
                    <div class="progress">
                        <div class="progress-bar" role="progressbar" 
                             style="width: {{ host.disk_usage }}%"
                             aria-valuenow="{{ host.disk_usage }}" 
                             aria-valuemin="0" aria-valuemax="100">
                            {{ host.disk_usage }}%
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="mt-3">
            <a href="{% url 'host_edit' host.pk %}" class="btn btn-primary">编辑</a>
            <a href="{% url 'host_list' %}" class="btn btn-secondary">返回列表</a>
            <button type="button" class="btn btn-danger" data-bs-toggle="modal" 
                    data-bs-target="#deleteModal">删除</button>
        </div>
    </div>
</div>

<!-- 删除确认对话框 -->
<div class="modal fade" id="deleteModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">确认删除</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                确定要删除主机 "{{ host.hostname }}" 吗？
            </div>
            <div class="modal-footer">
                <form method="post" action="{% url 'host_delete' host.pk %}">
                    {% csrf_token %}
                    <button type="button" class="btn btn-secondary" 
                            data-bs-dismiss="modal">取消</button>
                    <button type="submit" class="btn btn-danger">确定删除</button>
                </form>
            </div>
        </div>
    </div>
</div>
{% endblock %} 